<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" type="text/css" href="static/login/JD_sass/JD1.css"/>
    <script src="static/login/JD_js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
    <title>谷粒商城登录页面</title>
</head>
<body>
<!--顶部logo-->
<header>
    <a href="http://gulimail.com"><img src="static/login/JD_img/logo.jpg"/></a>
    <p>欢迎登录</p>
    <p style="color: red" th:if="${session.msg != null}" th:text="${session.msg}"></p>
    <div class="top-1">
        <img src="static/login/JD_img/4de5019d2404d347897dee637895d02b_06.png"/><span>登录页面,调查问卷</span>
    </div>
</header>

<div class="top-2">
    <div class="top-2a">
        <img src="static/login/JD_img/4de5019d2404d347897dee637895d02b_11.png"/>
        <p>依据《网络安全法》，为保障您的账户安全和正常使用，请尽快完成手机号验证！新版《<span>谷粒商城隐私政策</span>》已上线，将更有利于保护您的个人隐私。</p>
    </div>
</div>

<!--大图-->
<div class="top-3">
    <div class="img_1">
        <img src="static/login/JD_img/5731485aN1134b4f0.png"/>
    </div>
    <div id="sign">
        <div class="si_top">
            <p>
                <span>谷粒商城不会以任何理由要求您转账汇款，谨防诈骗。</span>
            </p>
        </div>
        <div class="si_cen">
            <h2 class="act btn1">扫码登录</h2>
            <span>|</span>
            <h2 class="btn1">账户登录</h2>
        </div>
        <div class="si_bom tab">
            <img src="static/login/JD_img/show.png" class="bom_1"/>
            <a href="#"><img src="static/login/JD_img/phone-orange.png" class="bom_2"/></a>
            <h6>打开<span class="red">手机谷粒商城</span> 扫描二维码</h6>
            <p>
                <img src="static/login/JD_img/4de5019d2404d347897dee637895d02b_15.png"/>
                <span><a href="#">免输入</a></span>
                <img src="static/login/JD_img/4de5019d2404d347897dee637895d02b_17.png"/>
                <span><a href="#">更快</a></span>
                <img src="static/login/JD_img/4de5019d2404d347897dee637895d02b_19.png"/>
                <span><a href="#">更安全</a></span>
            </p>
        </div>
        <div class="si_bom1 tab" style="display: none;">
            <div class="error">
                <div></div>
                请输入账户名和密码
            </div>
            <form action="/login" method="post">
                <div style="color:red;" th:text="${#maps.isEmpty(errors)?'':#maps.containsKey(errors,'msg')?errors.msg:''}"></div>
                <ul>
                    <li class="top_1">
                        <img src="static/login/JD_img/user_03.png" class="err_img1"/>
                        <input type="text" name="loginUserName" placeholder=" 邮箱/用户名/已验证手机" class="user"/>
                        <div style="color:red;" th:text="${#maps.isEmpty(errors)?'':#maps.containsKey(errors,'loginUserName')?errors.loginUserName:''}"></div>
                    </li>
                    <li>
                        <img src="static/login/JD_img/user_06.png" class="err_img2"/>
                        <input type="password" name="loginPassword" placeholder=" 密码" class="password"/>
                        <div style="color:red;" th:text="${#maps.isEmpty(errors)?'':#maps.containsKey(errors,'loginPassword')?errors.loginPassword:''}"></div>
                    </li>

                    <li class="bri">
                        <a href="static/login/">忘记密码</a>
                    </li>
                    <li class="ent">
                        <button class="btn2" type="submit"><a class="a">登 &nbsp; &nbsp;录</a></button>
                    </li>
                </ul>
            </form>
        </div>
        <div class="si_out">
            <ul>
                <li>
                    <a href="https://github.com/login/oauth/authorize?client_id=7a5fefb44152bc4299e7&redirect_uri=http://auth.gulimail.com/github/callback">
                        <svg t="1614916505811" class="icon" viewBox="0 0 3786 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1120" width="35" height="16"><path d="M729.176289 438.294072H410.703618c-7.882987 0-14.977675 6.30639-14.977675 14.977675v155.294843c0 7.882987 6.30639 14.977675 14.977675 14.977675h123.762895v193.133179s-27.590454 9.459584-104.843726 9.459584c-90.654349 0-217.570439-33.108545-217.570439-312.166281s132.43418-316.107775 256.197075-316.107775c107.208622 0 153.718245 18.919169 182.885296 28.378752 9.459584 3.153195 18.13087-6.30639 18.13087-14.977675l35.473441-150.56505c0-3.941493-1.576597-8.671286-5.518091-11.82448C687.396459 40.991532 614.872979 0 430.411085 0 217.570439 0 0 90.654349 0 525.006928c0 434.352579 249.102386 498.993072 459.578137 498.993072 174.214011 0 279.846035-74.100077 279.846035-74.100077 4.729792-2.364896 4.729792-8.671286 4.729793-11.036182V453.271747c0-8.671286-7.094688-14.977675-14.977676-14.977675zM2368.837567 52.027714c0-7.882987-6.30639-14.977675-14.977675-14.977676h-178.943803c-7.882987 0-14.977675 6.30639-14.977675 14.977676v346.063125h-279.057737V52.027714c0-7.882987-6.30639-14.977675-14.977675-14.977676H1686.959199c-7.882987 0-14.977675 6.30639-14.977675 14.977676v937.287144c0 7.882987 6.30639 14.977675 14.977675 14.977675h178.943803c7.882987 0 14.977675-7.094688 14.977675-14.977675V588.070824H2159.938414l-0.788299 401.244034c0 7.882987 6.30639 14.977675 14.977676 14.977675h179.732101c7.882987 0 14.977675-7.094688 14.977675-14.977675V52.027714z" fill="#100E0F" p-id="1121"></path><path d="M1067.356428 175.002309c0-64.640493-52.027714-116.668206-115.879908-116.668206s-115.091609 52.027714-115.091609 116.668206c0 64.640493 52.027714 116.668206 115.091609 116.668207 63.852194 0 115.879908-52.027714 115.879908-116.668207zM1054.743649 791.451886V358.675905c0-7.882987-6.30639-14.977675-14.977675-14.977676h-178.943803c-7.882987 0-15.765974 8.671286-15.765974 16.554273v619.602771c0 18.13087 11.036182 23.648961 26.013857 23.648961h160.812933c17.342571 0 22.072363-8.671286 22.072363-23.648961 0.788299-33.108545 0.788299-163.177829 0.788299-188.403387z" fill="#100E0F" p-id="1122"></path><path d="M3049.139338 345.274827h-177.367206c-7.882987 0-14.977675 7.094688-14.977675 14.977675V819.830639s-44.933025 33.108545-109.573518 33.108545c-63.852194 0-81.194765-29.167052-81.194765-92.230947V360.252502c0-7.882987-6.30639-14.977675-14.977675-14.977675h-180.5204c-7.882987 0-14.977675 7.094688-14.977676 14.977675v431.199384c0 186.038491 104.055427 231.759815 246.737491 231.759815 117.456505 0 212.052348-64.640493 212.052348-64.640492s4.729792 33.896844 6.306389 37.838337c2.364896 3.941493 7.094688 7.882987 13.401078 7.882987l115.091609-0.788299c7.882987 0 14.977675-7.094688 14.977675-14.977675V359.464203c0-7.094688-6.30639-14.189376-14.977675-14.189376zM3535.51963 324.779061c-100.902232 0-169.484219 44.933025-169.484218 44.933025V52.027714c0-7.882987-6.30639-14.977675-14.977675-14.977676h-179.732102c-7.882987 0-14.977675 6.30639-14.977675 14.977676v937.287144c0 7.882987 6.30639 14.977675 14.977675 14.977675h124.551193c5.518091 0 10.247883-3.153195 12.612779-7.882987 3.153195-4.729792 7.882987-43.356428 7.882987-43.356428s73.311778 69.370285 212.840647 69.370285c163.177829 0 256.985373-82.771363 256.985373-372.076983-0.788299-288.517321-149.776751-325.56736-250.678984-325.567359z m-70.158583 527.371824c-61.487298-1.576597-103.267129-29.95535-103.267129-29.95535V525.795227s40.991532-25.225558 92.230947-29.95535c63.852194-5.518091 125.339492 13.401078 125.339492 166.331024-0.788299 160.812933-28.378753 193.133179-114.30331 189.979984zM1569.502694 343.698229h-134.010777V166.331024c0-7.094688-3.153195-10.247883-11.036182-10.247883h-182.885296c-7.094688 0-11.036182 3.153195-11.036182 10.247883v183.673595s-91.442648 22.072363-97.749038 23.648961c-6.30639 1.576597-11.036182 7.882987-11.036181 14.189376v115.091609c0 8.671286 6.30639 14.977675 14.977675 14.977675h93.807544v277.48114c0 205.745958 144.258661 226.241724 242.007698 226.241724 44.933025 0 97.749038-14.189376 106.420324-17.342571 5.518091-1.576597 8.671286-7.094688 8.671285-13.401078v-126.916089c0-7.882987-7.094688-14.977675-14.977675-14.977675-7.882987 0-27.590454 3.153195-48.874519 3.153194-66.21709 0-88.289453-30.743649-88.289453-70.158583V518.700539h134.010777c7.882987 0 14.977675-6.30639 14.977676-14.977675V358.675905c-0.788299-7.882987-7.094688-14.977675-14.977676-14.977676z" fill="#100E0F" p-id="1123"></path></svg>
                    </a>
                </li>
                <li class="f4"> |</li>
                <li>
                    <a href="static/login/">
                        <img src="static/login/JD_img/weixin.png"/>
                        <span>微信</span>
                    </a>
                </li>
            </ul>
            <h5 class="rig">
                <img src="static/login/JD_img/4de5019d2404d347897dee637895d02b_25.png"/>
                <span><a href="http://auth.gulimail.com/register.html">立即注册</a></span>
            </h5>
        </div>
    </div>
</div>


<!--底部-->
<footer>
    <ul>
        <li><a href="#">关于我们</a></li>
        <li class="little">|</li>
        <li><a href="#">联系我们</a></li>
        <li class="little">|</li>
        <li><a href="#">人才招聘</a></li>
        <li class="little">|</li>
        <li><a href="#">商家入驻</a></li>
        <li class="little">|</li>
        <li><a href="#">广告服务</a></li>
        <li class="little">|</li>
        <li><a href="#">手机谷粒商城</a></li>
        <li class="little">|</li>
        <li><a href="#">友情链接</a></li>
        <li class="little">|</li>
        <li><a href="#">销售联盟</a></li>
        <li class="little">|</li>
        <li><a href="#">谷粒商城社区</a></li>
        <li class="little">|</li>
        <li><a href="#">谷粒商城公益</a></li>
        <li class="little">|</li>
        <li><a href="#">English Site</a></li>
    </ul>
    <span>Copyright &copy; 2004-2017 谷粒商城gulimall.com 版权所有</span>
</footer>

</body>
<script type="text/javascript">
    var alDiv = document.getElementsByClassName('tab');
    var alBtn = document.getElementsByTagName('h2');
    alDiv[0].style.display = 'block';
    var act = alBtn[0]
    for (var i = 0; i < alBtn.length; i++) {
        alBtn[i].indent = i;
        alBtn[i].onclick = function () {
            act.className = '';
            alDiv[act.indent].style.display = 'none';
            this.className = 'act'
            alDiv[this.indent].style.display = 'block'
            act = this
        }
    }

    var btn2 = document.getElementsByClassName('btn2')[0];
    var user = document.getElementsByClassName('user')[0];
    var pass = document.getElementsByClassName('password')[0];
    var err = document.getElementsByClassName('error')[0];
    var err_img1 = document.getElementsByClassName('err_img1')[0];
    var err_img2 = document.getElementsByClassName('err_img2')[0];

    // btn2.onclick = function () {
    //     if (user.value == '' || pass.value == '') {
    //         err.style.display = 'block';
    //         user.style.border = '1px solid red';
    //         pass.style.border = '1px solid red';
    //         err_img1.src = 'JD_img/img11.png';
    //         err_img2.src = 'JD_img/img22.png';
    //     } else {
    //         var a = document.getElementsByClassName("a")[0].href = "http://www.baidu.com";
    //     }
    //     user.onfocus = function () {
    //         err_img1.src = 'JD_img/grow1.png';
    //         user.style.border = '1px solid #999';
    //     }
    //     pass.onfocus = function () {
    //         err_img2.src = 'JD_img/grow2.png';
    //         pass.style.border = '1px solid #999';
    //     }
    //     user.onblur = function () {
    //         err_img1.src = 'JD_img/img11.png';
    //         user.style.border = '1px solid red';
    //     }
    //     pass.onblur = function () {
    //         err_img2.src = 'JD_img/img22.png';
    //         pass.style.border = '1px solid red';
    //     }
    // }
</script>
</html>
